<template>
    <el-container style="height:100%;">
        <el-header>
            <div class="header">
                <div class="collapse-btn" @click="collapseChage">
                    <i v-if="!collapse" class="el-icon-s-fold"></i>
                    <i v-else class="el-icon-s-unfold"></i>
                </div>
                <div class="logo">后台管理</div>
                <div class="header-right">
                    <div class="header-user-con">
                        <div class="user-avator">
                            <img src="" />
                        </div>
                        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link">
                                账户<!--{{username}}-->
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item  @click.native="center">个人中心</el-dropdown-item>
                                    <el-dropdown-item  @click.native="quitLogin">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-header>
        <el-container >
            <el-aside width="" >
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" :router="true">
                    <!--首页-->
                    <el-menu-item index="/manage/">
                        <i class="el-icon-discount"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>



                    <!--课程表-->
                    <!--<el-menu-item index="/manage/studentList"><i class="el-icon-reading"></i>课程表管理</el-menu-item>-->
                    <el-submenu index="9" v-show="scheduleFlag">
                        <template slot="title">
                            <i class="el-icon-reading"></i>
                            <span slot="title">课程表管理</span>
                        </template>
                        <el-menu-item index="/manage/schedule">课程表管理</el-menu-item>
                    </el-submenu>

                    <!--班级管理-->
                    <el-submenu index="1" v-show="classesFlag">
                        <template slot="title">
                            <i class="el-icon-reading"></i>
                            <span slot="title">班级管理</span>
                        </template>
                        <el-menu-item index="/manage/classesTypeList">班级类型管理</el-menu-item>
                        <el-menu-item index="/manage/classesList">班级管理</el-menu-item>
                        <el-menu-item index="/manage/classMerge">合班管理</el-menu-item>
                    </el-submenu>


                    <!--教室管理-->
                    <el-submenu index="2" v-show="classRoom">
                        <template slot="title">
                            <i class="el-icon-school"></i>
                            <span slot="title">教室管理</span>
                        </template>
                        <el-menu-item index="/manage/classRoomTypeList">教室类型管理</el-menu-item>
                        <el-menu-item index="/manage/classRoomList">教室管理</el-menu-item>
                    </el-submenu>

                    <!--课程管理-->
                    <el-submenu index="3" v-show="courseFlag">
                        <template slot="title">
                            <i class="el-icon-reading"></i>
                            <span slot="title">课程管理</span>
                        </template>
                        <el-menu-item index="/manage/courseList">课程管理</el-menu-item>
                        <el-menu-item index="/manage/courseTeacher">课程教室对应管理</el-menu-item>
                    </el-submenu>

                    <!--课程计划管理-->
                    <el-submenu index="4" v-show="coursePlanFlag">
                        <template slot="title">
                            <i class="el-icon-notebook-2"></i>
                            <span slot="title">课程计划管理</span>
                        </template>
                        <el-menu-item index="/manage/coursePlan">课程计划管理</el-menu-item>
                    </el-submenu>

                    <!--教师管理-->
                    <el-submenu index="5" v-show="teacherFlag">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">教师管理</span>
                        </template>
                        <el-menu-item index="/manage/teacherList">教师管理</el-menu-item>
                    </el-submenu>


                    <!--学生管理-->
                    <el-submenu index="6" v-show="studentFlag">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">学生管理</span>
                        </template>
                        <el-menu-item index="/manage/studentList">学生管理</el-menu-item>
                        <el-menu-item index="/manage/adjustClassList">调班管理</el-menu-item>
                    </el-submenu>

                    <!--通知管理-->
                    <el-submenu index="7" v-show="noticeFlag">
                        <template slot="title">
                            <i class="el-icon-message-solid"></i>
                            <span slot="title">通知管理</span>
                        </template>
                        <el-menu-item index="/manage/noticeTypeList">通知类型管理</el-menu-item>
                        <el-menu-item index="/manage/noticeLevelList">通知等级管理</el-menu-item>
                        <el-menu-item index="/manage/noticeList">通知管理</el-menu-item>
                        <el-menu-item index="/manage/notification">通知查看</el-menu-item>
                    </el-submenu>



                    <!--角色权限管理-->
                    <el-submenu index="8" v-show="rolePermission">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span slot="title">角色权限管理</span>
                        </template>
                        <el-menu-item index="/manage/role">角色管理</el-menu-item>
                        <el-menu-item index="/manage/permission">权限管理</el-menu-item>
                        <el-menu-item index="/manage/rolePermission">角色权限管理</el-menu-item>
                    </el-submenu>

                    <el-submenu index="11" v-show="rolePermission">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span slot="title">操作日志</span>
                        </template>
                        <el-menu-item index="/manage/LongingLog">登录日志</el-menu-item>
                        <el-menu-item index="/manage/log">操作日志</el-menu-item>
                    </el-submenu>


                </el-menu>

            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    export default {
        name: "HomeView",
        data() {
            return {
                collapse: true,
                isCollapse: true,

                //权限
                classesFlag:false,
                classRoom:false,
                courseFlag:false,
                studentFlag:false,
                teacherFlag:false,
                coursePlanFlag:false,
                noticeFlag:false,
                rolePermission:false,
                scheduleFlag:false

            };
        },
        created() {
            this.handleInit();
            this.handlePerpermission();

        },
        methods: {
            // //班级总数
            // handleClassesCount(){
            //     this.$axios.get("http://localhost:8080/manage/classes/total").then(response => {
            //         this.classesCount = response.data.data;
            //     });
            // },
            // //教师总数
            // handleTeacherCount(){
            //     this.$axios.get("http://localhost:8080/manage/teacher/total").then(response => {
            //         this.teacherCount = response.data.data;
            //     });
            // },
            // //课程总数
            // handleCourseCount(){
            //     this.$axios.get("http://localhost:8080/manage/course/total").then(response => {
            //         this.courseCount = response.data.data;
            //     });
            // },
            // //学生总数
            // handleStudentCount(){
            //     this.$axios.get("http://localhost:8080/student/total").then(response => {
            //         this.studentCount = response.data.data;
            //     });
            // },
            // //通知总数
            // handleNoticeCount(){
            //     this.$axios.get("http://localhost:8080/manage/notice/total").then(response => {
            //         this.noticeCount = response.data.data;
            //     });
            // },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            collapseChage(){
                if(this.collapse){
                    /*this.handleClose();*/
                    this.isCollapse=false;
                    this.collapse=!this.collapse;
                }
                else {
                    /*this.handleOpen();*/
                    this.isCollapse=true;
                    this.collapse=!this.collapse;
                }
            },
            //获得权限
            handlePerpermission(){
                this.$axios.get("manage/findAllPermission").then(res => {
                    console.log(res)
                    if(res.data.code==200){
                        res.data.data.forEach((item)=>{
                            if(item=="manage:*"){
                                this.classesFlag=true;
                                this.classRoom=true;
                                this.courseFlag=true;
                                this.studentFlag=true;
                                this.teacherFlag=true;
                                this.coursePlanFlag=true;
                                this.noticeFlag=true;
                                this.rolePermission=true;
                                this.scheduleFlag=true;
                            }else {
                                if (item=="manage:student") {
                                    this.studentFlag=true;
                                }
                                else if(item=="manage:teacher"){
                                    this.teacherFlag=true;
                                }
                                else if(item=="manage:classes"){
                                    this.classesFlag=true;
                                }
                                else if(item=="manage:classroom"){
                                    this.classRoom=true;
                                }
                                else if(item=="manage:course"){
                                    this.noticeFlag=true;
                                }
                                else if(item=="manage:course_plan"){
                                    this.coursePlanFlag=true;
                                }
                                else if(item=="manage:notice"){
                                    this.noticeFlag=true;
                                }
                                else if(item=="manage:role_permission"){
                                    this.rolePermission=true;
                                }
                                else if(item=="manage:schedule"){
                                    this.scheduleFlag=true;
                                }
                            }
                        })
                    }
                })
            },
            //初始化权限
            handleInit(){
                this.classesFlag=false;
                this.classRoom=false;
                this.courseFlag=false;
                this.studentFlag=false;
                this.teacherFlag=false;
                this.coursePlanFlag=false;
                this.noticeFlag=false;
                this.rolePermission=false;
                this.scheduleFlag=false;
            },
            quitLogin(){
                // 清空token
                window.localStorage.clear();
                //   跳转到登录页
                this.$router.push("/manage/managelogin");
            },
            //个人中心
            center(){
                this.$router.push("/manage/manageperson");
            }

        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .el-header{
        padding: 0;
        /*height: 20%;*/
    }
    .el-menu{
        margin: 10px 0 0 0;
        height: 100%;
    }
    .el-aside {
        overflow: hidden;
        height: 100%;
    }
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        background-color: #242f42;
        color: #fff;
    }
    .collapse-btn {
        float: left;
        padding: 0 20px;
        cursor: pointer;
        line-height: 70px;
    }
    .header .logo {
        float: left;
        width: 200px;
        line-height: 70px;
    }
    .header-right {
        float: right;
        padding-right: 50px;
        color: #fff;
    }
    .user-name{
        color: #fff;
    }
    .el-menu-vertical-demo{
        background-color: #324157;
        color: #bfcbd9;
        active-text-color: #20a0ff;
    }
    .el-menu-item{
        background-color: #324157;
        color: #bfcbd9;
        active-text-color: #20a0ff;
    }
    .el-menu-item,.el-submenu__title span{
        color: #bfcbd9;
    }
</style>